<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/5/29
  Time: 9:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/wechat/home/highStyle.css">
    <jsp:include page="../public/head.jsp" flush="true" />
</head>
<body>
<jsp:include page="../public/header.jsp" flush="true" />
<form id="week" action="/home/shopCar.do" method="post"  >
    <input type="hidden" name="order" id="order">
    <input  name="totalCount" type="hidden" id="totalCount">
    <input  name="totalPrice" type="hidden" id="totalPrice">
</form>
<input type="hidden" name="date" value="${rdate}"  >
<form id="form" >
    <input type="hidden" value="${product.price}" name="goodPrcie" id="goodPrcie" />
    <input type="hidden" value="${product.id}" name="goodId" />
    <input type="hidden" value="${product.image}" name="goodNormalImage" />
    <input type="hidden" value="${product.name}" name="goodName" />
    <input type="hidden" value="${productClassId}" name="productClassId" />

    <input type="hidden" value="0" name="goodAccount" id="count" />
</form>
<div class="my_highstyle">
<section>
      <%--<div class="out">--%>
          <%--<div class="time"><i class="iconfont icon-me">&#xe626;</i><span class="s1">打烊倒计时:</span><span class="s2">22:00</span></div>--%>
          <%--<div class="sold"><span class="s1">销量</span><span class="s2">987</span></div>--%>
      <%--</div>--%>

    <div class="cau_pos">
        <div class="scoller">
            <div class="cont">
                <div class="pic"><a><img src="${product.image}"></a></div>
                <div class="info">
                    <div class="picname"><a>${product.name}</a></div>
                    <div class="price"><div class="price1">￥${product.price}</div><div class="sold"></div></div>
                </div>
            </div>
        </div>
    </div>
    <!--/cau_pos-->

    <div class="pro_num">
        <span>数量</span>
        <div class="num">
            <div class="n1 current" onclick="countSub()">-</div>
            <div class="n2" id="scount">0</div>
            <div class="n3" onclick="countAdd()">+</div>
        </div>
    </div>

    <div class="pro_detial p_active" onclick="showOrHide(this)"><!--d_active 添加该class为展开-->
        <div class="titwap"><div class="tit">商品详情：</div><i class="iconfont icon-on">&#xe61e;</i><i class="iconfont icon-in">&#xe622;</i></div>
        <!-- 展开内容 -->
        <div class="open">
            <div class="cont">
            ${product.sdes}
            </div>
        </div>
        <!-- /展开内容 -->
    </div>
    <!--/pro_detial-->
    <!-- 评价内容 -->
    <div class="praise p_active" onclick="showOrHide(this)"><!--p_active 添加该class为展开-->
        <div class="open">
            <div class="titwap"><div class="tit">评价内容：</div><i class="iconfont icon-on">&#xe61e;</i><i class="iconfont icon-in">&#xe622;</i></div>
            <c:forEach items="${comments}" var="item">
            <div class="cont">
                <div class="cont_in">
                    <div class="left" style="background: url(${item.userPhoto}) 0 0 no-repeat; background-size:100% 100%;"></div>
                    <div class="center"><span class="s1">${item.nickName}</span><span class="s2">${item.addTime}</span></div>
                    <%--<div class="right">${item.tasteScore}分</div>--%>
                </div>
                <div class="txt">${item.content}</div>
                <div class="ocupie"></div>
            </div>
            </c:forEach>
        </div>
        <!--/cont-->
    </div>
    <!--/praise-->
    <div class="opra">
        <input type="button" name="" class="btn3" value="立即购买" onclick="buy()">
    </div>
</section>
</div>
<input type="hidden" id="total" value="0">
    <%--<div>${product.name}</div>--%>
<script>
    function showOrHide(_this) {
        if($(_this).hasClass("p_active")){
            $(_this).removeClass("p_active");
        }else {
            $(_this).addClass("p_active");
        }
    }

    function countAdd() {
        var current = $('#count').val();
//        var currentCount = $("#count").val();
        var currenttotal = $("#total").val();
        var price = $('#goodPrcie').val();
        current++;
        currenttotal = (parseFloat(price)+parseFloat(currenttotal)).toFixed(1);
        $("#count").val(current);
        $("#total").val(currenttotal);
        $("#scount").text(current) ;
    }

    function countSub(id) {
        var current = $('#count').val();
//        var currentCount = $("#count").val();
        var currenttotal = $("#total").val();
        var price = $('#goodPrcie').val();
        if (current == 0)
                return;
        current--;
//        currentCount++;
        currenttotal = (parseFloat(currenttotal)-parseFloat(price)).toFixed(1);
        $("#count").val(current);
        $("#total").val(currenttotal);
        $("#scount").text(current) ;
    }

    function buy(){
        var form = $("#form");
        var goods = [];
//        var tmp = $("#week").serializeObject();
        var key = $("input[name='date']").val();
        var temp = form.serializeObject();
        if (temp.goodAccount > 0) {
            temp.shopId = key;
            goods.push(temp);
        }
//        console.log(JSON.stringify(goods));
        if (goods.length > 0) {
            var data = '{"' + key + '":' + JSON.stringify(goods) + '}';
//            console.log(data);
            $("#order").val(data);
            $("#totalCount").val($("#count").val());
            $("#totalPrice").val($("#total").val());
//            console.log($("#week").serialize());
//            window.location.href = "/home/shopCar.do?"+$("#week").serialize();
            $("#week").submit();
        }
    }

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };


</script>
</body>
</html>
